A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Umbraco

I'm reading through the UUI documentation and the example code doesn't actually show how to attach complex data such as an array to the UUI-Select component. I've tried this in my modal's render() method, and it doesn't work:

render() {
const targetOptions: Array<Option> = [
    { name: 'Carrot', value: 'orange' },
    { name: 'Cucumber', value: 'green' },
    { name: 'Aubergine', value: 'purple' },
    { name: 'Blueberry', value: 'Blue' },
    { name: 'Banana', value: 'yellow' },
    { name: 'Strawberry', value: 'red' },
];

 return html`<uui-select @options="${targetOptions}"></uui-select>`;
}

GOT IT:
render() {
const targetOptions: Array<Option> = [
    { name: 'Carrot', value: 'orange' },
    { name: 'Cucumber', value: 'green' },
    { name: 'Aubergine', value: 'purple' },
    { name: 'Blueberry', value: 'Blue' },
    { name: 'Banana', value: 'yellow' },
    { name: 'Strawberry', value: 'red' },
];

 return html `<uui-select placeholder="Select an option" .options=${targetOptions}></uui-select>`;
}

Render is a good place for my use case, but I think you can put it elsewhere. The trick to binding was .options= which I was missing